<template>
	<div id="search">
		<div class="top-box">
			<i class="fa fa-search" v-show="!inputVal"></i>
			<input type="text" v-model="inputVal"/>
		</div>
		<div class="mid">
			<span>电影/电视剧/综艺</span>
		</div>
		<div class="main">
			<ul>
				<li v-for="item in newList" :key="item.id">
					<div class="first">
						<img :src="item.img">
					</div>
					<div class="second">
						<p class="title"><span>{{item.title}}</span><span>{{item.score}}</span></p>
						<p class="type">剧情,喜剧,犯罪</p>
						<p class="time">2020-8-30</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				nowPlayData:[],
				inputVal:''
			}
		},
		methods: {
			getNowPlayData() {
				var that = this
				axios.get('/mock/nowPlayData.json').then(function(response) {
					console.log(response)
					if (response.status == 200) {
						if(response.data && response.data.nowPlayData){
							that.nowPlayData = response.data.nowPlayData
						}
					}
				}).catch(function(error) {
					console.log(error)
				})
			}
		},
		computed:{
			newList(){
				if(this.inputVal==''){
					return this.nowPlayData
				}else{
					return this.nowPlayData.filter(item=>{
						return !item.title.indexOf(this.inputVal)
					})
				}
			}
		},
		created(){
			  this.getNowPlayData()
		}
	}
</script>

<style scoped>
	#search{
		width: 100%;
		margin-bottom: 40px;
	}
	.top-box{
		display: flex;
		width: 100%;
		height: 45px;
		background: rgba(161, 159, 157, 0.2);
	}
	.top-box input{
		width: 95%;
		height: 55%;
		align-self: center;
		margin: 0 auto;
		border: 1px solid rgba(161, 161, 155, 0.4);
	}
	.fa-search{
		align-self: center;
		position: absolute;
		margin-left: 5%;
	}
	.mid{
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #D3D3D3;
	}
	.mid span{
		font-size: 18px;
		font-weight: 900;
		color: #CCCCCC;
		line-height: 40px;
		margin-left: 3%;
	}
	.main{
		width: 100%;
		margin: 10px 10px;
	}
	.main li{
		display: flex;
		height: 130px;
		border-bottom: 1px dashed #999999;
	}
	img {
		width: 100px;
		height: 120px;
	}
	.title{
		font-size: 20px;
		font-weight: bold;
	}
	.title span:last-child{
		float: right;
		color: #FF9900;
	}
	.second{
		width: 60%;
		margin-left: 3%;
		
	}
	.second p{
		margin-top: 15px;
	}
</style>
